<%
    def columns = tableDefine.columns
    def varDomainName = tableNameUtil.lowerCaseFirst(tableDefine.id)
    def urlPrefix = PubUtils.addStrBeforeSeparator(PubUtils.packageToPath(config.category), ".") + varDomainName
%>
<template>
    <div>
        <el-form ref="form" :model="formSearch" :label-width="formLabelWidth" style="padding:10px;">
        <%
            List<String> list = tableModel.getSearchKeyList();
            def listSize = list.size()
            int i = 0;
            list.each {
                if (i % 4 == 0) {
                    println "       <el-row>"
                }
                def column = tableDefine.getColumnByColumnName(it);
        %>
            <el-col :span="6">
                <el-form-item label="${column.cnname}">
                    <el-input v-model="formSearch.${column.dataName}" placeholder="请输入 ${column.cnname}" size="small" @keyup.enter.native="loadData" />
                </el-form-item>
            </el-col>
        <%
                i++;
                if(i%4 == 0){
                    println "       </el-row>"
                }
            }

            if(i%4 == 0 ){
               %>
            <el-row>
                <el-col :offset="20" :span="4">
                    <el-button type="primary" icon="el-icon-search" size="small" :loading="loading" @click="loadData">
                        Search
                    </el-button>
                </el-col>
            </el-row>
                <%
            } else{
                %>
                <el-col :span="6" style="padding-left:10px;">
                    <el-button type="primary" icon="el-icon-search" size="small" :loading="loading" @click="loadData">
                        Search
                    </el-button>
                </el-col>
                <%
                    println "       </el-row>"
            }
        %>



        </el-form>

        <div style="padding:10px;">
            <add ref="addModal" :show-button="false" @refreshList="loadData()" />
            <edit ref="editModal"  @refreshList="loadData()" />
            <el-button type="primary" size="small" icon="el-icon-plus" :loading="loading" @click="showAdd">新增 ${tableDefine.cnname}</el-button>
            <el-button type="warning" size="small" icon="el-icon-minus" :loading="loading" @click="handleDelete">删除</el-button>
        </div>

        <el-table
                ref="multipleTable"
                :data="queryResult.dataList"
                style="width: 100%" >
            <el-table-column
                    fixed="left"
                    type="selection"
                    width="55" />

            <%
                columns.each {
                    def column = it
                    if (tableModel.isNotInList('queryList', column.columnName)) {
                        return
                    }
            %>
            <el-table-column
                    prop="${column.dataName}"
                    label="${column.cnname}"
                    stripe border
                    width="120">
            </el-table-column>
            <%
                }
            %>

            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100"
            >
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="editItem(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div style="float: right; padding:8px;">
            <el-pagination
                    :current-page="queryResult.pageQuery.pageNo"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="queryResult.pageQuery.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="queryResult.pageQuery.totalCount"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
    import add from './add.vue'
    import edit from './edit.vue'
    var _ = require('underscore')

    let formSearchSample = {
 <%
  list.eachWithIndex{ it,index ->
      def column=tableDefine.getColumnByColumnName(it);
      String dataName = column.dataName
      String value = tableNameUtil.genTestDataQuote(column,dictMap)
      print """\t\t'${dataName}': ${value}"""
      if(index < list.size()-1){
        println ","
      }else{
        println ""
      }
  }
%>
    }

    export default {
        components: {
            add,
            edit
        },
        data() {
            return {
                loading: false,
                formLabelWidth: '80px',
                formSearch: _.clone(formSearchSample),
                queryResult: {
                    dataList: [],
                    pageQuery: {
                        totalCount: 0,
                        pageNo: 1,
                        pageSize: 20
                    }
                }
            }
        },
        mounted() {
            this.loadData()
        },
        methods: {
            loadData: function() {
                const _this = this
                _this.loading = true
                const promise = new Promise(function(resolve, reject) {
                    // remote ajax request ,need implement
                    setTimeout(function() {
                        _this.loading = false

                        const remoteData = {
                            success: true,
                            value: [_.clone(formSearchSample)],
                            pageQuery: {
                                totalCount: 0,
                                pageNo: 1,
                                pageSize: 20
                            }
                        }
                        resolve(remoteData)
                    }, 1000)
                })
                promise.then(function(data) {
                    console.log(data)
                    _this.queryResult.dataList = data.value
                    _this.queryResult.pageQuery = data.pageQuery
                }).catch(function() {
                    this.\$Message.error('查询失败！')
                })
            },
            handleSizeChange: function(pageSize) {
                this.queryResult.pageQuery.pageSize = pageSize
                this.loadData()
            },
            handleCurrentChange(pageNo) {
                this.queryResult.pageQuery.pageNo = pageNo
                this.loadData()
            },
            handleDelete() {
                const selection = this.\$refs.multipleTable.selection
                if (selection.length === 0) {
                    // this.\$Message.warning('请至少选择一行记录！')
                    alert('请至少选择一行记录！')
                    return
                }
                if (selection.length > 1) {
                    // this.\$Message.warning('删除操作只能选择一条！')
                    alert('删除操作只能选择一条！')
                    return
                }

                const _this = this
                const dataItem = selection[0]

                _this.loading = true
                const promise = new Promise(function(resolve, reject) {
                    // remote ajax request ,need implement
                    setTimeout(function() {
                        console.log(dataItem)
                        _this.loading = false
                        resolve({ 'success': true })
                    }, 1000)
                })
                promise.then(function(data) {
                    // this.\$Message.success('删除成功！')
                    alert('删除成功')
                    _this.handleCurrentChange(1)
                }).catch(function() {
                    this.\$Message.error('删除失败！')
                })
            },
            showAdd() {
                this.\$refs.addModal.show(true)
            },
            editItem(item) {
                this.\$refs.editModal.editItem(item)
            }
        }
    }
</script>
